{include file="public/header"}
<title>贷款计算器</title>
<style>
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #F7F7F7;
    }

    /*头部*/
    .top {
        height: 60px;
        width: 100%;
        background: rgba(22, 26, 39, 1);
    }

    .top_box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        align-items: center;

    }

    .top_name_left {
        width: 38px;
        height: 38px;
        background: rgba(52, 99, 230, 1);
        border-radius: 10px;
        margin-right: 10px;
    }

    .top_name {
        height: 60px;
        font-size: 24px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 60px;
    }

    .top_name_r {
        width: 76px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 1);
        margin-left: 26px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .top_name_r img {
        height: 16px;
        width: 16px;
    }

    .top_name_r span {
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-left: 3px;
    }

    .lii {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(132, 134, 141, 1);
        line-height: 22px;
        margin-right: 24px;
    }

    .color_white {
        color: #fff;
    }

    .top_login {
        margin-left: 36px;
        display: flex;
        align-items: center;
    }

    .top_login img {
        width: 28px;
        height: 28px;
    }

    .top_login span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-left: 8px;
    }

    .top_marginR {
        margin-right: 16px;
    }

    /*头部*/

    /*footer2样式*/
    .footer2 {
        width: 100%;
        height: 168px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -8px 20px 0px rgba(0, 0, 0, 0.04);
    }

    .footerint {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    .footer_word {
        padding-top: 20px;
        padding-left: 268px;
    }

    .footer_word span {
        width: 420px;
        height: 68px;
        font-size: 22px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 34px;
        margin-bottom: 25px;
    }

    .footer_js {
        height: 21px;
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 21px;
        margin-right: 25px;
    }

    .footer_ma {
        width: 120px;
        height: 120px;
        padding-top: 25px;
        padding-right: 75px;
    }

    .footer_ma img {
        width: 100%;
        height: 100%;
    }

    .footer_phone {
        width: 145px;
        height: 200px;
        position: absolute;
        bottom: 0;
        left: 94px;
        box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.08);
    }

    .footer_phone img {
        width: 100%;
        height: 100%;
    }

    .footer_del {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 17px;
        right: 3px;
    }

    .footer_del img {
        width: 100%;
        height: 100%;
    }

    /*footer2样式*/
    /*footer1样式*/
    .footer {
        width: 100%;
        height: 130px;
        background: rgba(31, 31, 31, 1);
        display: flex;
        align-items: center;
    }

    .footer_in {
        width: 1210px;
        margin: 0 auto;
        height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 18px;
    }

    /*footer1样式*/
    .bar {
        width: 1200px;
        height: 57px;
        align-items: center;
        margin: 0 auto;
        font-size: 12px;
        color: #999999;
    }

    .right_arrow {
        width: 14px;
        height: 14px;
        margin-left: 6px;
        margin-right: 6px;
    }

    .box {
        width: 1200px;
        height: 551px;
        margin: 0 auto;
        margin-bottom: 20px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
    }

    .title {
        height: 59px;
        line-height: 59px;
        font-size: 16px;
        color: #333333;
        border-bottom: 1px solid #EDEDED;
        padding-left: 24px;
        font-weight: 600;
    }

    .inner {
        padding-left: 55px;
        padding-top: 40px;
        width:600px;
    }

    .one {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: #999;
        margin-bottom: 20px;
    }

    .right {
        margin-left: 40px;
        width: 300px;
        height: 44px;
        background: #F5F5F6;
        border-radius: 4px;
        position: relative;
    }

    .right1 {
        margin-left: 40px;
        width: 300px;
        height: 44px;
    }

    .content {
        color: #666666;
        padding-left: 20px;
    }

    .down {
        width: 32px;
        height: 44px;
        background: url('__IMG__/cdown.png') no-repeat center center;
        background-size: 12px 12px;
    }

    .up {
        width: 32px;
        height: 44px;
        background: url('__IMG__/cup.png') no-repeat center center;
        background-size: 12px 12px;
    }

    input[type='text'] {
        -webkit-appearance: none;
        outline: none;
        background: transparent;
        width: 258px;
        color: #666;
        font-size: 14px;
        margin: 0;
        height: 44px;
        padding-left: 20px;
        padding-right: 20px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
    }

    input::-webkit-input-placeholder {
        color: #999;
        font-size: 14px;
    }

    .button {
        margin-left: 68px;
        width: 300px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: #3463E6;
        border-radius: 4px;
        color: #FFFFFF;
        font-size: 14px;
        cursor: pointer;
    }

    .box1 {
        width: 1200px;
        height: auto;
        margin: 0 auto;
        margin-bottom: 120px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
        padding-bottom: 40px;
    }

    .biaoge {
        width: 1072px;
        margin: 20px auto 0px;
        border-radius: 4px;
        border: 1px solid #EEEEEE;
        border-bottom: none;
    }

    .bTitle {
        height: 54px;
        line-height: 54px;
        background: #3463E6;
        border-radius: 4px 4px 0px 0px;
        font-size: 14px;
        text-align: center;
        color: #FFFFFF;
        padding-left: 38px;
        padding-right: 38px;
    }

    .number {
        font-size: 18px;
        padding-left: 10px;
    }

    .bTitle1 {
        height: 54px;
        line-height: 54px;
        background: #E5E7EB;
        font-size: 14px;
        text-align: center;
        color: #000;
        padding-left: 38px;
        padding-right: 38px;
    }

    .tLeft {
        text-align: left;
    }

    .tRight {
        text-align: right;
    }

    .bTitle2 {
        height: 35px;
        line-height: 35px;
        background: #F7F8FA;
        font-size: 14px;
        color: #999999;
        padding-left: 38px;
    }

    .bTitle3 {
        text-align: center;
        border-spacing: 0;
        color: #333;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #EEEEEE;
        padding-left: 50px;
        padding-right: 50px;
    }

    .button:hover {
        background-color: #5079EC;
    }

    .list {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 300px;
        height: 80px;
        color: #666666;
        font-size: 14px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 4px 4px;
        z-index: 999;
    }

    .choose {
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        background-color: #FFF;
    }

    .choose:hover {
        background-color: #EFEFEC;
    }

    .hidden {
        display: none;
    }

    .year {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 300px;
        height: 240px;
        overflow: hidden;
        overflow-y: scroll;
        color: #666666;
        font-size: 14px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 4px 4px;
        z-index: 999;

    }

    /*滚动条样式*/
    .year::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        /*height: 20px;*/
    }

    .year::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 100px;
        height: 48px;
        background: rgba(0, 0, 0, 0.25);
    }

    .year::-webkit-scrollbar-track { /*滚动条里面轨道*/
        border-radius: 0;
        background: #FFFFFF;
    }

    .rate {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 300px;
        height: 80px;
        color: #666666;
        font-size: 14px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 4px 4px;
        z-index: 999;
    }

    .choose1 {
        align-items: center;

    }

    input[name='shuru'] {
        -webkit-appearance: none;
        outline: none;
        background: #FFFFFF;
        width: 126px;
        height: 28px;
        color: #666;
        font-size: 14px;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        border: none;
        border-radius: 4px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .sure {
        margin-left: 11px;
        color: #333;
        font-size: 14px;
    }
    /**/
    .circle_sfj{
        width:192px;
        height:192px;
    }
    .right_sfj{
        font-size:16px;
        font-weight:600;
        color:rgba(140,140,140,1);
        margin-left:44px;
    }
    .dian_sfj1{
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:#000000;
        margin-right:5px;
    }
    .dian_sfj2{
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:#EB7760;
        margin-right:5px;
    }
    .dian_sfj3{
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:#5278E3;
        margin-right:5px;
    }
    .dian_sfj4{
        width:10px;
        height:10px;
        border-radius:50%;
        background-color:#EBCE60;
        margin-right:5px;
    }
    .front_sfj{
        margin-right:58px;
        margin-top:25px;
    }
    .middle_sfj{
        margin-top:25px;
        margin-bottom:33px;
    }
    .one_sfj{
        width:100%;
    }
    /**/
</style>
<body>
<div class="bar flex-wrap">
    置家优选 <img src="__IMG__/right_arrow.png" class="right_arrow"/>计算器
</div>
<div class="box">
    <div class="title">房贷计算器</div>
    <div class="inner">
        <div class="flex-wrap one">
            <div>类型</div>
            <div class="right flex-wrap" onclick="select(this)" idd=1>
                <div class="flex-con content">商业贷款</div>
                <div class="down select" id="select1"></div>
                <div class="list card autoget hidden" id="list1">
                    <div class="choose" onclick="getLlsByType(1);">商业贷款</div>
                    <div class="choose" onclick="getLlsByType(2);">公积金贷款</div>
                </div>
            </div>
        </div>
        <div class="flex-wrap one">
            <div>年限</div>
            <div class="right flex-wrap" onclick="select(this)" idd=2>
                <div class="flex-con content">1年</div>
                <div class="down select" id="select2"></div>
                <div class="year card hidden autoget" id="list2">
                    {for start='1' end='31'}
                    <div class="choose" data-id="{$i*12}">{$i}年</div>
                    {/for}
                </div>
                <!---->
                <input type="hidden" id="dkm" value="12" />
                <!---->
            </div>
        </div>
        <div class="flex-wrap one">
            <div>等额</div>
            <div class="right flex-wrap" onclick="select(this)" idd=3>
                <div class="flex-con content">等额本金</div>
                <div class="down select" id="select3"></div>
                <div class="list card autoget hidden" id="list3">
                    <div class="choose" data-id="2">等额本金</div>
                    <div class="choose" data-id="1">等额本息</div>
                </div>
                <!---->
                <input type="hidden" id="type" value="2" />
                <!---->
            </div>
        </div>
        <div class="flex-wrap one" style="z-index: 999">
            <div>利率</div>
            <div class="right flex-wrap" onclick="select(this)" idd=4>
                <div class="flex-con content lilvtext">4.9</div>
                <div class="down select" id="select4"></div>
                <div class="list card hidden" id="list4" style="height: auto;background-color: #fff">
                    <div class="getTypeLls">
                    {volist name='data' id='d'}
                    <div class="choose lilv" data-id="{$d.dl_value*100}">{$d.dl_name}({$d.dl_value*100})</div>
                    {/volist}
                    </div>
                    <!--<div class="choose lilv" data-id="5.39">上浮10%</div>-->
                    <!--<div class="choose lilv" data-id="5.88">上浮20%</div>-->
                    <!--<div class="choose lilv" data-id="6.37">上浮30%</div>-->
                    <div class="choose choose1 flex-wrap">
                        自定义<input type="text" name="shuru" placeholder="请输入利率" class="qingchu"  oninput = "handleMoney(this,1);" />%
                        <div class="sure">确定</div>
                    </div>
                </div>
            </div>
            <!---->
            <input type="hidden" id="dknl" value="4.9" />
            <!---->
        </div>
        <div class="flex-wrap one">
            <div>总价(万)</div>
            <div class="right1">
                <input type="text" id="dkmoney" placeholder="请输入贷款金额" oninput = "handleMoney(this,1);"/>
            </div>
        </div>
        <div class="button">开始计算</div>
    </div>
    <div class="hidden daikuan_bing" style="width: 500px;height: 300px;margin-top: -350px;float: right;margin-right: 100px;">
        <div class="one_sfj">
            <p style="width: 30%;text-align: center;font-size: 20px;font-weight: bold;line-height: 50px;">贷款计算</p>
            <div class="flex-wrap">
                <!-- 环形图 -->
                <div class="circle_sfj" id="circle_sfj">

                </div>
                <!-- 环形图 -->
                <div class="right_sfj">
                    <div class="flex-wrap">
                        <div class="front_sfj"><span class="dian_sfj1"></span><span id="zong"></span></div>
                    </div>
                    <div class="flex-wrap">
                        <div class="front_sfj"><span class="dian_sfj2"></span><span id="shou"></span></div>
                    </div>
                    <div class="flex-wrap">
                        <div class="front_sfj"><span class="dian_sfj3"></span><span id="shang"></span></div>
                    </div>
                    <div class="flex-wrap">
                        <div class="front_sfj"><span class="dian_sfj4"></span><span id="li"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box1 hidden">
    <div class="title">计算结果</div>
    <div class="biaoge">
        <div class="bTitle flex-wrap">
            <div class="flex-con tLeft">贷款年限<span class="number allyear">25年</span></div>
            <div class="flex-con">总贷款额<span class="number allmoney">2222万</span></div>
            <div class="flex-con">总还款额<span class="number allhuan">2222万</span></div>
            <div class="flex-con tRight">总利息<span class="number alllixi">2222万</span></div>
        </div>
        <div class="bTitle1 flex-wrap">
            <div class="flex-con tLeft">月份</div>
            <div class="flex-con">本金</div>
            <div class="flex-con">利息</div>
            <div class="flex-con">月供</div>
            <div class="flex-con tRight">剩余欠款</div>
        </div>
        <div id="empty">

        </div>

    </div>
</div>
{include file="public/foot1"}
</body>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="__JS__/echarts.min.js" ></script>
<script type="text/javascript">
    //类型、年限、等额的赋值
    $('.autoget div').click(function () {
        var val = $(this).attr('data-id');
        var text = $(this).text();
        $(this).parent().prev().prev().text(text);
        $(this).parent().next().val(val);
    });
    //利率的赋值1
    $('.lilv').click(function () {
        var val = $(this).attr('data-id');
        var text = $(this).text();
        $('.lilvtext').text(text);
        $('#dknl').val(val);
    });
    //利率的赋值2
    $('.sure').click(function (event) {
        if($('.qingchu').val() > 0){
//            var val = parseFloat($('.qingchu').val())+1;
//            var newval = val*4.9;
            var newval = parseFloat($('.qingchu').val());
            $('.lilvtext').text(newval.toFixed(2));
            $('#dknl').val(newval.toFixed(2));
            $('.qingchu').val('');
        }
    });
    //---------------------------------------------------------------------
    function getLlsByType(type) {
        $.ajax({
            url: '/home/Jisuan/getLls',
            data: {'type':type},
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                var datas = returnData.msg;
                $('.getTypeLls').empty();
                $.each(datas,function(key,v){
                    var value = (v.dl_value)*100;
                    value = value.toFixed(2);
                    var str = '<div class="choose lilv" data-id="'+value+'">'+v.dl_name+'('+value+')</div>';
                    $('.getTypeLls').append(str);
                });

                if(type == 1){
                    $('.lilvtext').text('4.9');
                    $('#dknl').val(4.9);
                }else{
                    $('.lilvtext').text('3.25');
                    $('#dknl').val(3.25);
                }

                //利率的赋值1
                $('.lilv').click(function () {
                    var val = $(this).attr('data-id');
                    var text = $(this).text();
                    $('.lilvtext').text(text);
                    $('#dknl').val(val);
                });
            },
            error: function () {
                alert('ajax error，请刷新重试');
            }
        })
    }
    //---------------------------------------------------------------------
    //开始计算
    $('.button').click(function () {
        var type = $('#type').val();
        var dkm = $('#dkm').val();
        var dknl = $('#dknl').val();
        var dkmoney = $('#dkmoney').val();
        if(dknl == '' || dkmoney == ''){
            alert('贷款利率和贷款金额不能为空')
        }else{
            $.ajax({
                url: '/home/Jisuan/jisuanqi',
                data: {'type':type,'dkm':dkm,'dknl':dknl,'dkTotal':dkmoney},
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    five(returnData['msg'][0]['month'].toFixed(2),(parseFloat(returnData.alllixi/10000)).toFixed(2),(dkmoney*3/7).toFixed(2),dkmoney)
                    $('#zong').text('总价：' + (parseFloat(dkmoney) + parseFloat(returnData.alllixi/10000)).toFixed(2) + '万元');
                    $('#shou').text('首付：' + (dkmoney*3/7).toFixed(2) + '万元');
                    $('#shang').text('商贷：' + dkmoney + '万元');
                    $('#li').text('利息：' + (parseFloat(returnData.alllixi/10000)).toFixed(2) + '万元');
                    $('.daikuan_bing').removeClass('hidden');
                    //--------------------
                    $('.allyear').text(dkm/12+'年');
                    $('.allmoney').text(dkmoney+'万');
                    $('.allhuan').text((parseFloat(dkmoney)+parseFloat(returnData.alllixi/10000)).toFixed(2)+'万');
                    $('.alllixi').text((parseFloat(returnData.alllixi/10000)).toFixed(2)+'万');
                    //--------------------
                    $('#empty').empty();
                    $('.box1').removeClass('hidden');
                    var datas = returnData.msg;
                    $.each(datas,function(key,v){
                        var str = '';
                        if(v.num % 12 == 1){
                            str = '<div class="bTitle2">第'+(v.num-1+12)/12+'年<span style="float: right;padding-right: 50px;">单位：元</span></div>';
                        }
                        if(v.num % 12 == 0){
                            v.num = 12;
                        }else{
                            v.num = v.num % 12;
                        }
                        $("#empty").append('' + str +
                            '<div class="bTitle3 flex-wrap">' +
                            '<div class="flex-con tLeft">'+v.num+'</div>' +
                            '<div class="flex-con">'+v.benjin.toFixed(2)+'</div>' +
                            '<div class="flex-con">'+v.lixi.toFixed(2)+'</div>' +
                            '<div class="flex-con">'+v.month.toFixed(2)+'</div>' +
                            '<div class="flex-con tRight">'+v.last.toFixed(2)+'</div>' +
                            '</div>'
                        );
                    });
                },
                error: function () {
                    alert('ajax error，请刷新重试');
                }
            })
        }
    });
    function select(e) {
        var idd = e.getAttribute('idd');
        var selectId = "select" + idd;
        var id = "list" + idd;
        var arrow = document.getElementById(selectId);
        var list = document.getElementById(id);
        var card = document.getElementsByClassName("card");
        for (var i = 0; i < card.length; i++) {
            card[i].classList.add("hidden");
        }
        var select = document.getElementsByClassName("select");
        for (var i = 0; i < select.length; i++) {

            if (select[i].className.indexOf('up') > -1) {
                if (select[i] != arrow) {
                    select[i].classList.remove("up");
                    select[i].classList.add("down");
                }
            }

        }
        // 方式2
        if (arrow.className.indexOf('down') > -1) {
            arrow.classList.remove("down");
            arrow.classList.add("up");
            list.classList.remove("hidden");
        } else {
            arrow.classList.add("down");
            arrow.classList.remove("up");
            list.classList.add("hidden");
        }
    }
    $(".qingchu").on("click", function (event) {
        if (event.stopPropagation) {
            // 针对 Mozilla 和 Opera
            event.stopPropagation();
        } else if (window.event) {
            // 针对 IE
            window.event.cancelBubble = true;
        }
    });
</script>
<script>
    function handleMoney(obj,type){
        if(type == 0){
            obj.value = obj.value.replace(/[^\d]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }else{
            obj.value = obj.value.replace(/[^\d.]/g, '');
            obj.value = obj.value.replace(/\.{2,}/g, '.');
            obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            if (obj.value.indexOf('.') < 0 && obj.value != '') {
                obj.value = parseFloat(obj.value);
            }
            if ((obj.value.length == 1 && obj.value == '.') || obj.value.substring(0,1) == '.') {
                obj.value = '';
            }
        }

    }
    function five(yuegong,lixi,shoufu,dai) {
        var myChart = echarts.init(document.getElementById('circle_sfj'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: []
            },
            title: {
                text: '参考月供',
                subtext: yuegong+'元/月',
                x: 'center',
                y: 'center',
                top: '40%',
                textStyle: {
                    fontSize: 10,
                    fontWeight: 400,
                    color:'#CFD2D8'
                },
                subtextStyle: {
                    fontSize: 10,
                    color: '#333',
                    fontWeight: 400
                }
            },
            series: [
                {
                    name: '单价：万元',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: lixi, name: '利息'},
                        {value: shoufu, name: '首付'},
                        {value: dai, name: '商贷'}
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#F1CD47', '#FC6E58','#4679EB'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
</html>
